<template>
  <!-- App -->
  <f7-app :params="f7params">

    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

<!--    &lt;!&ndash; Left Panel &ndash;&gt;
    <f7-panel left reveal theme-dark>
      <f7-view url="/panel-left/"></f7-view>
    </f7-panel>

    &lt;!&ndash; Right Panel &ndash;&gt;
    <f7-panel right cover theme-dark>
      <f7-view url="/panel-right/"></f7-view>
    </f7-panel>-->


    <f7-views tabs safe-areas :class="themeClass">

      <f7-toolbar tabbar labels bottom>
        <f7-link tab-link="#home" href="/home/" text="首页" icon-ios="f7:home" tab-link-active
                 icon-md="material:home"></f7-link>
        <f7-link tab-link="#member" href="/member/memberHome/" text="好人" icon-ios="f7:message"
                 icon-md="material:message"></f7-link>
        <f7-link icon-badge="5" href="/activity/actHome/" badge-color="red" tab-link="#act" text="好聚" icon-ios="f7:timer"
                 icon-md="material:timer"></f7-link>
        <f7-link tab-link="#user" href="/user/userCenter/" text="我的" icon-ios="f7:person"
                 icon-md="material:person"></f7-link>
      </f7-toolbar>

      <!--:iosDynamicNavbar="false" IOS禁用nav穿透布局-->
      <f7-view  id="home" url="/home/" main tab tab-active></f7-view>
      <f7-view  id="member" url="/member/memberHome/" tab></f7-view>
      <f7-view  id="act" url="/activity/actHome/" tab></f7-view>
      <f7-view  id="user" url="/user/userCenter/" tab></f7-view>

      <!-- guidePage 启动页 View -->
      <f7-view url="/guidePage/"></f7-view>

    </f7-views>


    <!-- Popup -->
<!--    <f7-popup id="popup">
      <f7-view>
        <f7-page>
          <f7-navbar title="Popup">
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.</f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>-->

    <!-- Login Screen -->
<!--    <f7-login-screen id="login-screen">
      <f7-view>
        <f7-page login-screen>
          <f7-login-screen-title>登录</f7-login-screen-title>
          <f7-list form>
            <f7-list-input
              label="手机号"
              name="username"
              placeholder="手机号"
              type="text"
            />
            <f7-list-input
              label="密码"
              name="password"
              type="password"
              placeholder="密码"
            />
          </f7-list>
          <f7-list>
            <f7-list-button title="登录" login-screen-close></f7-list-button>
            <f7-block-footer>
              <p>Click Sign In to close Login Screen</p>
            </f7-block-footer>
          </f7-list>
        </f7-page>
      </f7-view>
    </f7-login-screen>-->

  </f7-app>
</template>

<script>
// Import Routes
import routes from './routes.js'

export default {
  data() {
    return {
      isThemeDark:false,
      themeClass:'color-theme-#007aff',
      // Framework7 parameters here
      f7params: {
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection auto, ios, md, aurora
        backgroundColor: 'red',
        view: {  // 注意这里 pushState 是 view 的属性，直接是直接挂在 framework7 上
          // pushState: true,
          // pushStateSeparator: '/',
          iosDynamicNavbar: false,
        },
        // App routes
        routes: routes,
      },
    }
  }
}
</script>
<style>
  .list-margin {
    margin: 0px;
  }
</style>
